
import { Component, createRef } from 'react';

class Lion extends Component {
    constructor(props){
        super(props);
        // Refs 是使用 React.createRef() 创建的
        // 在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们
        this.btn = createRef();
    }
    render(){
        return (
            <div className="wrapper">
                <p>监听原生事件</p>
                {/* 通过 ref 属性(attribute) 附加到 React 元素 */}
                <button ref={ this.btn }>点击按钮触发原生事件</button>
            </div>
        )
    }
    handleClick(evt){
        console.log( '= = = 原生事件 = = =' );
        console.log( evt );
    }
    componentDidMount(){
        // 当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问
        let button = this.btn.current;
        // 手动绑定事件监听器
        button.addEventListener( 'click', this.handleClick, false );
    }
    componentWillUnmount(){
        this.btn.current.removeEventListener( 'click', this.handleClick, false );
    }
}

export default Lion ;